import React, { Component } from 'react';
import {
	Image, Text, View, Modal, Linking,
	StyleSheet, Platform, DeviceEventEmitter, ScrollView
} from 'react-native';
import { GLOBAL } from '../../config/global';
import StorageHelper from '../../utils/storageHelper';
import { STORAGE_CONSTANT } from '../../config/storage';
import { style } from '../../theme/style';

export class UpdateModal extends Component {
	static props = {
		appVersionInfo: null
	}

	constructor(props) {
		super(props);
		this.state = {
			updateModalVisible: true
		};
	}

	render () {
		const { updateModalVisible } = this.state;
		if (updateModalVisible) {
			return (
				<View style={{ flex: 1 }}>
					<Modal
						transparent={true}
						visible={this.state.isVisible}
						animationType={'fade'}
						onRequestClose={() => {
							this.setState({
								updateModalVisible: false
							})
						}}>

						{this.renderUpdateDialog()}

					</Modal>
				</View>
			);
		} else {
			return null;
		}
	}

	renderUpdateDialog () {
		return (
			<View style={styles.container}>
				<View style={styles.backgroundView}></View>
				<View style={styles.updateContainer}>
					<Image source={require('../../imgs/global/updateIcon.png')} style={styles.updateIcon} />
					<Text style={styles.updateLabel}>版本更新</Text>
					<View style={styles.updateInfo}>
						<Text style={styles.updateVersion}>最新版本：{this.props.appVersionInfo['versionNo']}</Text>
						<Text style={styles.updateInfoDetail}>更新内容：</Text>
						<ScrollView style={styles.updateInfoBox}>
							{this.props.appVersionInfo['content'].map((item, index) => {
								return <Text key={index} style={styles.updateInfoItem}>{item}</Text>
							})}
						</ScrollView>
					</View>
					{this.props.appVersionInfo['upgradeWay'] === '1' ?
						(<Text style={styles.forcedUpdate} onPress={this.goUpdate.bind(this)}>升级到新版本</Text>)
						: (<View style={styles.buttons}>
							<Text style={styles.cancle} onPress={this.ignoreUpdate.bind(this)}>忽略</Text>
							<Text style={styles.update} onPress={this.goUpdate.bind(this)}>更新</Text>
						</View>)
					}
				</View>
			</View >
		)
	}

	componentWillMount () {
		//显示下载进度
		DeviceEventEmitter.addListener('LOAD_PROGRESS', (msg) => {
			let title = "当前下载进度：" + msg
			//ToastAndroid.show(title, ToastAndroid.SHORT);
		});
	}

	goUpdate () {
		//关闭更新提示框
		this.setState({ updateModalVisible: false });
		if (Platform.OS === 'ios') {
			//前去safari下载
			Linking.openURL(this.props.appVersionInfo['url']);
		} else if (Platform.OS === 'android') {
			Linking.openURL(this.props.appVersionInfo['url']);
			console.log(this.props.appVersionInfo['url']);
			// 下载最新Apk  
			// NativeModules.upgrade.startUpgrade(this.props.appVersionInfo['url']);
		}
	}

	ignoreUpdate () {
		//忽略该版本
		StorageHelper.get(STORAGE_CONSTANT.VERSION_IGNORE).then(versionIgnore => {
			versionIgnore = versionIgnore || {};
			versionIgnore['versionIgnoreCode'] = this.props.appVersionInfo['versionCode'];
			versionIgnore['versionIgnoreTime'] = new Date();
			StorageHelper.set(STORAGE_CONSTANT.VERSION_IGNORE, versionIgnore);
		})
		//关闭更新提示框
		this.setState({ updateModalVisible: false });
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: 'center',
		position: 'absolute',
		height: '100%',
		width: '100%',
		top: 0,
		bottom: 0,
		zIndex: 99
	},
	backgroundView: {
		position: 'absolute',
		backgroundColor: '#000',
		width: '100%',
		height: '100%',
		opacity: 0.5
	},
	updateContainer: {
		alignItems: 'center',
		backgroundColor: '#fff',
		width: 261 * GLOBAL.SCALE,
		marginTop: 135 * GLOBAL.SCALE,
		borderRadius: 8 * GLOBAL.SCALE,
	},
	updateIcon: {
		width: 103 * GLOBAL.SCALE,
		height: 103 * GLOBAL.SCALE,
		marginTop: 14 * GLOBAL.SCALE,
		marginBottom: 12 * GLOBAL.SCALE,
	},
	updateLabel: {
		color: style.color.themeColor,
		fontSize: 14 * GLOBAL.SCALE
	},
	updateInfo: {
		width: '100%',
		marginTop: 16 * GLOBAL.SCALE,
		paddingLeft: 25 * GLOBAL.SCALE,
		paddingRight: 25 * GLOBAL.SCALE,
		marginBottom: 17 * GLOBAL.SCALE,
	},
	updateVersion: {
		marginBottom: 7 * GLOBAL.SCALE,
		fontSize: 13 * GLOBAL.SCALE
	},
	updateInfoDetail: {
		// marginBottom: 7 * GLOBAL.SCALE,
		fontSize: 13 * GLOBAL.SCALE
	},
	updateInfoItem: {
		marginBottom: 4 * GLOBAL.SCALE,
		marginLeft: 4 * GLOBAL.SCALE,
		fontSize: 12 * GLOBAL.SCALE
	},
	buttons: {
		width: '100%',
		flexDirection: 'row',
		justifyContent: 'center',
	},
	cancle: {
		width: 130 * GLOBAL.SCALE,
		paddingTop: 12 * GLOBAL.SCALE,
		paddingBottom: 12 * GLOBAL.SCALE,
		fontSize: 14 * GLOBAL.SCALE,
		color: '#404040',
		textAlign: 'center',
		borderTopColor: style.color.border,
		borderTopWidth: 1
	},
	update: {
		width: 130 * GLOBAL.SCALE,
		paddingTop: 12 * GLOBAL.SCALE,
		paddingBottom: 12 * GLOBAL.SCALE,
		color: style.color.themeColor,
		fontSize: 14 * GLOBAL.SCALE,
		textAlign: 'center',
		borderLeftColor: style.color.border,
		borderLeftWidth: 1,
		borderTopColor: style.color.border,
		borderTopWidth: 1
	},
	forcedUpdate: {
		width: 233 * GLOBAL.SCALE,
		height: 32 * GLOBAL.SCALE,
		lineHeight: 32 * GLOBAL.SCALE,
		backgroundColor: style.color.themeColor,
		borderRadius: 100 * GLOBAL.SCALE,
		color: '#ffffff',
		fontSize: 14 * GLOBAL.SCALE,
		textAlign: 'center',
		marginBottom: 17 * GLOBAL.SCALE
	},
	updateInfoBox: {
		height: 92 * GLOBAL.SCALE,
	}
})